
.display-b() {
    display: block;
}

.display-i() {
    display: inline;
}

.display-ib() {
    display: inline-block;
}

//font family
.font-fm() {
    font-family: "Microsoft Yahei";
}

.font-fs() {
    font-family: "SimSun";
}

.font-fa() {
    font-family: "Arial";
}

//font weight
.font-w700() {
    font-weight: 700;
}

.font-w400() {
    font-weight: 400;
}

//font size
.font-s(@p: 12px) {
    font-size: @p;
}

// =============================================
// @des:      css compatible function
// @author:   x-bird <x-bird@qiubs.com>
// @time:     2013-07-26
// =============================================
//png24透明
//.c-png24(#ccc, "http://taobao.com/logo.jpg");
.c-png24(@color, @url) {
    background: @color url("@{url}") no-repeat 0 0;
    _background: @color none;
    filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='scale')";
}

.fixpng24(@url) {
    background: url("@{url}") no-repeat 0 0;
    _background: none;
    filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='scale')";
}

//**
// * clearfix
// * @author x-bird <x-bird@qiubs.com>
// */
.clearfix() {
    *zoom: 1;
    &:before,
    &:after {
        display: table;
        content: "";
        // Fixes Opera/contenteditable bug:
        // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
        line-height: 0;
    }
    &:after {
        clear: both;
    }
}

//**
// * image-center
// * @author tangoboy <zhulutangoboy@gmail.com>
// */
// http://ued.taobao.com/blog/2007/10/22/css-notes-5/
// 未知尺寸图片居中
// 盒子 宽 高 
.image-center(@width,
@height) {
    @_fontsize: round(@height * 0.873);
    width: ~'@{width}px';
    height: ~'@{height}px';
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    *display: block; //IE hack
    *font: ~"@{_fontsize}px/1em Arial";
    img {
        max-height: ~'@{height}px';
        max-width: ~'@{width}px';
        vertical-align: middle;
    }
}

//盒子是正方形时 尺寸
.image-center(@size) {
    @_fontsize: round(@size * 0.873);
    width: ~'@{size}px';
    height: ~'@{size}px';
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    *display: block; //IE hack
    *font: ~"@{_fontsize}px/1em Arial";
    img {
        max-height: ~'@{size}px';
        max-width: ~'@{size}px';
        vertical-align: middle;
    }
}

//有时候ie6会出现居中过度，使用这个就没事
.image-center-piaer(@size,@_centent) {
    @_fontsize: round(@_centent * 0.873);
    width: ~'@{size}px';
    height: ~'@{size}px';
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    *display: block; //IE hack
    *font: ~"@{_fontsize}px/1em Arial";
    img {
        max-height: ~'@{size}px';
        max-width: ~'@{size}px';
        vertical-align: middle;
    }
}

//px2em
//@author x-bird <x-bird@qiubs.com>
.vl-width-px2em(@pixel: 16) {
    @per: (@pixel/16);
    width: ~"@{per}em";
}

.vl-font-px2em(@pixel: 12) {
    @per: (@pixel/16);
    font-size: ~"@{per}em";
}

//**
// * image-center
// * @author 立 <x-bird@qiubs.com>
// */
// http://ued.taobao.com/blog/2007/10/22/css-notes-5/
// 已知尺寸图片居中
// 盒子 宽 高 
.known-image-center(@width,
@height) {
    @_fontsize: round(@height * 0.873);
    width: ~'@{width}px';
    height: ~'@{height}px';
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    *display: block; //IE hack
    *font: ~"@{_fontsize}px/1em Arial";
    img {
        height: ~'@{height}px';
        width: ~'@{width}px';
        vertical-align: middle;
    }
}

//盒子是正方形时 尺寸
.known-image-center(@size) {
    @_fontsize: round(@size * 0.873);
    width: ~'@{size}px';
    height: ~'@{size}px';
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    *display: block; //IE hack
    *font: ~"@{_fontsize}px/1em Arial";
    img {
        height: ~'@{size}px';
        width: ~'@{size}px';
        vertical-align: middle;
    }
}

// inline-block fix
.inline-block-fix() {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

//Mr.piaer 2013/10/17 上午
// ie6图片背景透明
// enabled= : true  :滤镜激活。 false  :滤镜被禁止。
// sizingMethod=:crop:剪切图片以适应对象尺寸。[即不平铺]
//image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。[一般不采用]
//scale: 缩放图片以适应对象的尺寸边界。 [即平铺]
.hyaline-img(@url) {
    background: url(@url);
    _background: transparent;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',
    sizingMethod='corp',
    src=~'@{url}');
    border: none;
}

//双行截取省略号
.add-two-line-ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
    &:after {
        content: "...";
        display: inline-block;
        position: absolute;
        bottom: 0;
        right: 0;
        text-align: right;
        z-index: 2;
        background: #fff;
    }
}

//单行截取省略号
.add-line-ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.fix-image(@width,
@height) {
    @_fontsize: round(@height * 0.873);
    width: ~'@{width}px';
    height: ~'@{height}px';
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    *display: block; //IE hack
    *font: ~"@{_fontsize}px/1em Arial";
    img {
        // max-height: ~'@{height}px';
        // max-width: ~'@{width}px';
        vertical-align: middle;
    }
}